<template lang="pug">
  .foot-menu(
    v-if="getMenuStatus",
    ref="footWrap",
    :class="{'active': getMenuStyleObj}",
    @touchmove="handleDragPrevent")
    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
</template>

<script>
import wx from '@/components/Menu/app/menu-wx-mixins'
export default {
  mixins: [wx]
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.theme-app-g
  .foot-menu
    .foot-menu-list
      flex-cnter()
      padding: 10px 0
      box-sizing: border-box
      color: $white
      position fixed
      top 100px
      right 10px
      .menu-item
        flex: 1
        max-width: 46px
        align-self: center
        display: inline-block
        text-align: center
        cursor: pointer
        .menu-text
          font-size: 10px
          margin-top: 5px
        .menu-icon
          display: inline-block
          width: 28px
          height: 28px
          line-height: 28px
          border-radius: 50%
          transition: all 1s
          background-color: $white
          i
            vertical-align: middle
            color: $theme-classic-color
    .bottom-menu-list
      flex-cnter()
      background-color: $white

      .mask
        position: fixed
        top: 0
        left: 0
        width: 100vw
        height: calc(100vh - 35px)

      .bottom-menu-item
        flex: 1
        line-height: 36px
        color: $black
        &:not(:last-child)
          bdr-1px($gray)
        &:nth-of-type(1)
          .submenu
            transform: translate(2px, -100%)
        &:last-child
          .submenu
            transform: translate(-2px, -100%)
        & > a
          display: block
          padding: 5px
          max-width: 80px
          box-sizing: border-box
          margin: 0 auto
          &.has-icon
            padding-left: 15px
        .van-icon
          position: absolute
          top: 50%
          left: 4px
          transform: translateY(-50%)
        .bottom-menu-text
          font-size: 12px
          color: $black-light

        .submenu
          position: absolute
          top: -10px
          width: 100%
          border-radius: 4px
          background-color: $white
          transform: translateY(-100%)
          trangle-bottom(10px, $white)
          li
            height = 35px
            height: height
            line-height: height
            overflow: hidden
            &:not(:last-child)
              bdb-1px($gray)
            a
              font-size: 12px
              color: $black-light
              height: height

</style>
